<script>
import { Chart } from '@antv/g2'
import dayjs from 'dayjs'
// import { URL_Syn } from '@/service/rto/URL-Rto'
// import http from '@/utils/http'
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        startTime: '',
        endTime: '',
        tagNo: '',
        interval: 10,
        time: ''
      },
      chart: null,
      showChart: false,
      tokenVal:
        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjp7InVzZXJJZCI6IjEwNmFmODA0LThmMjgtNDQ1Mi04YWVjLTQxMTcxMGI3NDMxZiIsInRlbmFudElkIjoiYTNkMWFiYjgtOWVmZS05Y2QwLTM4YTgtYWE3Y2E4ZTI2Y2RiIiwiYWNjb3VudCI6IkVDT1MiLCJ3b3JrTnVtYmVyIjoiRUNPUyIsInN5cyI6MCwibWFuYWdlciI6MCwidXNlck5hbWUiOiJFQ09T5LiT55SoIiwiZ2VuZGVyIjoxLCJiaXJ0aCI6IjAwMDEtMDEtMDEiLCJtb2JpbGUiOiIiLCJlbWFpbCI6IiIsInNlc3Npb25JZCI6IjU5ZjIzYzgxLTI3ZmEtNDgzMC1hZjdkLWIxM2Y2NWE3OTk4YiJ9LCJpYXQiOjE2NjM3MjcxNjkuMCwiZXhwIjoxNjY4NzI3MTY5LjAsImp0aSI6IkNJUyJ9.WQR0J8CgVfAk-kDPxDj7pyAviUQtyN-fo53F2_lW8lI'
    }
  },
  //   props: ["tagNo"],
  methods: {
    init() {
      this.visible = true
    },
    getChartData() {
      this.dataForm.startTime = this.dataForm.time[0]
      this.dataForm.endTime = this.dataForm.time[1]
      if (!this.dataForm.startTime || !this.dataForm.endTime) {
        this.$message.warning('请输入查询条件')
      } else {
        http
          .post(
            'http://192.168.1.71:8019/api/services/app/RTO/FlowChart_HisTagValuesByTagNo',
            {
              ...this.dataForm,
              interval: this.dataForm.interval * 60
              // tagNo: "FI1001B", // this.tagNo,
            },
            { headers: { token: this.tokenVal } }
          )
          .then(res => {
            if (res.errorcode === 0) {
              this.destroyChart()
              this.showChart = true
              this.$nextTick(() => {
                const dataList = res.result.map(e => {
                  return {
                    ...e,
                    time: dayjs(e.time).format('YYYY-MM-DD HH:mm:ss')
                  }
                })
                this.chartInit(dataList)
                this.chartData = dataList
              })
              //   document.getElementById("lineChart").innerHTML = "";
            } else {
              this.$message.error(res.errorinfo)
            }
          })
      }
    },
    chartInit(data) {
      this.chart = new Chart({
        container: document.getElementById('lineChart'),
        autoFit: true,
        forceFit: true, // 图表的宽度自适应开关, 设置为 true 时表示自动取 dom（实例容器）的宽度。
        height: document.documentElement.clientHeight - 200,
        padding: [20, 50, 50, 60]
      })
      this.chart.data(data)
      this.chart.scale({
        time: {
          range: [0, 1],
          mask: 'YYYY-MM-DD HH:mm:ss'
        },
        value: {
          nice: true
        }
      })

      this.chart.tooltip({
        showCrosshairs: true,
        shared: true
      })

      this.chart.axis('value', {
        label: {
          formatter: val => {
            return val
          }
        }
      })
      this.chart.axis('time', {
        label: {
          autoRotate: false
        }
      })
      this.chart.line().position('time*value').color('tag').shape('smooth')
      this.chart
        .point()
        .position('time*value')
        .color('tag')
        .shape('circle')
        .size(0) // 控制点的大小;

      this.chart.render()
    },
    // 销毁图表
    destroyChart() {
      if (this.chart) {
        this.chart.destroy()
        this.chart = null
      }
    },
    handleClose() {
      this.destroyChart()
      this.visible = false
      this.showChart = false
      this.dataForm = {
        startTime: '',
        endTime: '',
        interval: 10
      }
    }
  }
}
</script>

<template>
  <cis-dialog
    v-model:visible="visible"
    title="趋势图"
    :showClose="handleClose"
    width="1000px"
    :appendToBody="true"
  >
    <template #content>
      <el-form :inline="true">
        <el-form-item label="时间区间">
          <el-date-picker
            v-model="dataForm.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="取值间隔(分钟)">
          <el-input
            v-model="dataForm.interval"
            size="mini"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getChartData">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <div class="chart-container">
        <div v-if="showChart" id="lineChart"></div>
        <cis-empty-text :visible="!showChart" :height="450"></cis-empty-text>
      </div>
    </template>
  </cis-dialog>
</template>

<style lang="scss" scoped>
#lineChart {
  padding: 20px 0;
  width: 100%;
  height: 450px;
}
</style>
